<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../components/tf-event-dashboard/tf-event-dashboard.html">
<link rel="import" href="../components/tf-histogram-dashboard/tf-histogram-dashboard.html">
<link rel="import" href="../components/tf-image-dashboard/tf-image-dashboard.html">
<link rel="import" href="../components/tf-graph-dashboard/tf-graph-dashboard.html">
<link rel="import" href="../components/tf-dashboard-common/tensorboard-color.html">
<!--
tf-tensorboard is the frontend entry point for TensorBoard.

It implements a toolbar (via paper-header-panel and paper-toolbar) that
allows the user to toggle between various dashboards.
-->
<dom-module id="tf-tensorboard">
  <template>
    <paper-header-panel>
      <paper-toolbar id="toolbar">
        <div id="toolbar-content">
          <div class="toolbar-title">
            TensorBoard
          </div>
          <div class="right-buttons">
            <paper-button
              class="link-button"
              on-click="chooseEvents"
              active$="[[eventDashboard(mode)]]"
              noink
            >Events</paper-button>
            <paper-button
              class="link-button"
              on-click="chooseImages"
              active$="[[imageDashboard(mode)]]"
              noink
            >Images</paper-button>
            <paper-button
              class="link-button"
              on-click="chooseGraphs"
              active$="[[graphDashboard(mode)]]"
              noink
            >Graph</paper-button>
            <paper-button
              class="link-button"
              on-click="chooseHistograms"
              active$="[[histogramDashboard(mode)]]"
              noink
            >Histograms</paper-button>
          </div>
        </div>
      </paper-toolbar>
      <div id="content" class="fit">
        <template is="dom-if" if="[[eventDashboard(mode)]]">
          <tf-event-dashboard id="eventDash"></tf-event-dashboard>
        </template>

        <template is="dom-if" if="[[imageDashboard(mode)]]">
          <tf-image-dashboard id="imageDash"></tf-image-dashboard>
        </template>

        <template is="dom-if" if="[[graphDashboard(mode)]]">
          <tf-graph-dashboard id="graphDash"></tf-graph-dashboard>
        </template>

        <template is="dom-if" if="[[histogramDashboard(mode)]]">
          <tf-histogram-dashboard id="histogramDash"></tf-histogram-dashboard>
        </template>
      </div>
    </paper-header-panel>
    <style>
      #toolbar {
        background-color: var(--tb-orange-strong);
        background-image: radial-gradient(ellipse, var(--tb-orange-weak), var(--tb-orange-strong));
      }
      #toolbar-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .toolbar-title {
        font-size: 30px;
      }
      #content {
        height: 100%;
      }
      .link-button {
        height: 30px;
      }
      [active] {
        font-weight: bold;
      }
      :host {
        height: 100%;
        display: block;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-tensorboard",
      properties: {
        mode: {
          type: String,
          value: "events",
        },
      },
      chooseEvents: function() {
        this.mode = "events";
      },
      chooseImages: function() {
        this.mode = "images";
      },
      chooseGraphs: function() {
        this.mode = "graphs";
      },
      chooseHistograms: function() {
        this.mode = "histograms";
      },
      eventDashboard: function(mode) {
        return mode === "events";
      },
      imageDashboard: function(mode) {
        return mode === "images";
      },
      graphDashboard: function(mode) {
        return mode === "graphs";
      },
      histogramDashboard: function(mode) {
        return mode === "histograms";
      }
    });
  </script>
</dom-module>
